<template>
  <view class="content">
    <!-- 登录用户区域 -->
    <view class="avatar-users">
      <!-- 头像区域 -->
      <image v-if="jwt === null" class="head_portrait" src="@/static/image/mine/head_portrait.png" />
      <image v-if="jwt !== null" class="head_portrait circular" :src="jwt.user_info.avatar" />
      <!-- 用户信息-没有授权 -->
      <view v-if="jwt === null" class="users">
        <button open-type="getUserInfo" class="rectangle" @click="getUserInfo">
          <!-- 微信图标 -->
          <image class="weixin" src="@/static/image/mine/weixin.png" />
          <text>授权登录</text>
        </button>
        <text class="tips">请微信授权后体验更多功能～</text>
      </view>
      <!-- 用户信息-经过授权-有手机号 -->
      <view v-if="jwt !== null && jwt.user_info.telephone === null" class="users">
        <view class="user_name">{{ jwt.user_info.nickname }}</view>
        <button
          open-type="getPhoneNumber"
          class="empower_rectangle"
          @getphonenumber="getPhoneNumber"
        >
          <image class="empower" src="@/static/image/mine/empower.png" />
          <text>授权联系方式</text>
        </button>
        <text class="notice">系统能及时通知您预订进度。</text>
      </view>
      <view v-if="jwt !== null && jwt.user_info.telephone !== null" class="users">
        <view class="user_name_phone">{{ jwt.user_info.nickname }}</view>
        <view class="vip">
          <image src="@/static/image/mine/vip.png" />
          <text>神舟畅游会员</text>
        </view>
      </view>
    </view>
    <!-- 卡片区域 -->
    <view class="card-box">
      <view class="card-order">
        <card :content="contentOrder" />
      </view>
      <view class="card-commonly-used">
        <card :content="contentCommonly" />
      </view>

      <view v-if="sale" class="card-sale">
        <card :content="contentSale" />
      </view>
    </view>

    <view class="bottom">———— 北京神舟国际旅行社 ————</view>
    <!-- 尾部区域 -->
  </view>
</template>

<script>
import { set, get } from '@utils/storage'
import { getUserInfo, getTelephone, login } from '@api/user'
import { setToken } from '@utils/auth'
import { card } from '@com/card'
export default {
  components: {
    card
  },
  data() {
    return {
      jwt: null,
      userInfo: null,
      sale: null
    }
  },
  computed: {
    // 订单卡片数据
    contentOrder() {
      const data = {
        title: '我的订单',
        type: 'normal',
        list: [
          {
            url: '../static/image/mine/order/order_ticket.png',
            text: '门票'
          },
          {
            url: '../static/image/mine/order/order_hotel.png',
            text: '酒店'
          },
          {
            url: '../static/image/mine/order/order_autarky.png',
            text: '自营'
          }
        ]
      }
      return data
    },
    // 常用入口
    contentCommonly() {
      const data = {
        title: '常用入口',
        type: 'small',
        list: [
          {
            url: '../static/image/mine/commonly/customer_service.png',
            text: '联系客服'
          },
          {
            url: '../static/image/mine/commonly/coupon.png',
            text: '优惠券'
          },
          {
            url: '../static/image/mine/commonly/year_season.png',
            text: '年/季卡'
          },
          {
            url: '../static/image/mine/commonly/passenger.png',
            text: '常用旅客'
          },
          {
            url: '../static/image/mine/order/order_hotel.png',
            text: '获得token'
          }, {
            url: '../static/image/mine/order/order_autarky.png',
            text: '自营商品支付'
          }
        ]
      }
      return data
    },
    // 销售入口
    contentSale() {
      const data = {
        title: '销售管理',
        type: 'normal',
        list: [
          {
            url: '../static/image/mine/sale/saleCode.png',
            text: '我的二维码'
          },
          {
            url: '../static/image/mine/sale/sale.png',
            text: '销售记录'
          }
        ]
      }
      return data
    }
  },
  created() {
    this.jwt = get('jwt')
    this.sale = get('sale')
    console.log(this.sale)
  },
  methods: {
    // 注册授权
    getUserInfo() {
      uni.checkSession({
        success: () => {
          uni.getUserInfo({
            success: (res) => {
              const query = {
                encryptedData: res.encryptedData,
                iv: res.iv,
                openId: get('openId')
              }
              getUserInfo(query).then((response) => {
                set('jwt', response.data.data.jwt)
                this.jwt = response.data.data.jwt
                setToken(this.jwt.auth.token)
              })
            },
            fail: () => {}
          })
        }
      })
    },
    // 手机号授权
    getPhoneNumber(e) {
      const query = {
        encryptedData: e.target.encryptedData,
        iv: e.target.iv
      }
      getTelephone(query).then((response) => {
        uni.login({
          success: (res) => {
            login({ code: res.code }).then((res) => {
              set('jwt', res.data.data.jwt)
              if (res.data.data.jwt !== null) {
                setToken(res.data.data.jwt.auth.token)
              }
              this.jwt = res.data.data.jwt
            })
          }
        })
      })
    },
    // 点击图标
    jumpPage() {}
  }
}
</script>

<style>
.content {
  position: relative;
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 10rpx;
  box-sizing: border-box;
}
/* 用户头像区域 */
.avatar-users {
  width: 750rpx;
  height: 290rpx;
  background-image: url("@/static/image/mine/head.png");
  display: flex;
  background-size: 100% 100%;
}
.circular {
  border-radius: 50%;
  width: 160rpx;
  height: 160rpx;
}
.head_portrait {
  margin-top: 40rpx;
  margin-left: 40rpx;
  width: 160rpx;
  height: 160rpx;
}
.users {
  margin-left: 42rpx;
  color: #ffffff;
}
/* 没有授权 */
.rectangle {
  display: flex;
  width: 196rpx;
  height: 56rpx;
  border: 2rpx solid #ffffff;
  background-color: #306de9;
  border-radius: 8rpx;
  margin: 0;
  margin-top: 66rpx;
  padding: 0;
}
.rectangle > text {
  font-size: 28rpx;
  line-height: 56rpx;
  margin-left: 10rpx;
  color: #ffffff;
}
.tips {
  margin-top: 24rpx;
  font-size: 24rpx;
}
.weixin {
  width: 40rpx;
  height: 33rpx;
  margin-top: 12rpx;
  margin-left: 18rpx;
}
/* 没有手机号 */
.user_name {
  margin-top: 50rpx;
  font-size: 34rpx;
  font-weight: 600;
  line-height: 48rpx;
}
.empower_rectangle {
  display: flex;
  padding: 0;
  margin: 0;
  color: #ffffff;
  width: 220rpx;
  height: 48rpx;
  background-color: #1650d4;
  border-radius: 28rpx;
  margin-top: 12rpx;
}
.empower_rectangle > text {
  font-size: 24rpx;
  font-weight: 500;
  line-height: 48rpx;
  margin-left: 10rpx;
}
.empower {
  width: 32rpx;
  height: 32rpx;
  margin-top: 8rpx;
  margin-left: 12rpx;
}
.notice {
  margin-top: 12rpx;
  font-size: 22rpx;
  font-weight: 300;
}
/* 有手机号 */
.user_name_phone {
  margin-top: 48rpx;
  line-height: 48rpx;
}
.vip {
  position: relative;
  width: 166rpx;
  height: 48rpx;
  margin-top: 12rpx;
}
.vip > image {
  width: 100%;
  height: 100%;
}
.vip > text {
  position: absolute;
  right: 8rpx;
  color: #000000;
  font-size: 18rpx;
  line-height: 48rpx;
}
/* 卡片区域 */
.card-box {
  display: flex;
  /* width: 710rpx; */
  flex-direction: column;
  align-items: center;
  transform: translateY(-60rpx);
}
.card-order ,.card-commonly-used,.card-sale {
  width: 710rpx;
  border-radius: 20rpx;
  margin-top: 20rpx;
  background-color: #ffffff;
  box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
  padding-bottom: 40rpx;
}

/* 尾部 */
.bottom {
  padding-bottom: 40rpx;
  font-size: 24rpx;
  padding-left: 164rpx;
  color: #cccccc;
}
</style>
